
import React, {FC,useState} from 'react'
import {Layout,Row,Col,Typography,Dropdown ,Button , Menu, Tag ,Modal, Form,Input,  message } from 'antd'
import { Myswipe,MyswipeItem } from './MySwipe';
import {
    AppstoreOutlined,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    PieChartOutlined,
    DesktopOutlined,
    ContainerOutlined,
    MailOutlined,
    UserOutlined,
    LockOutlined,
    DownOutlined,
    LogoutOutlined,
    ExclamationCircleOutlined
  } from '@ant-design/icons';
import { inject, observer } from 'mobx-react';
import { Link, useNavigate } from 'react-router-dom';
import { roleList } from '../utils';
import MyAvatar from './MyAvatar';
import { reg } from '../utils/validate';
import { ajax } from './../api/index';
const { Header } = Layout;
const {Title} = Typography
const {confirm} = Modal;
const style = {
    cm:{
        display:'flex',
        alignItems:"center",
        height:'100%'
    },
    sw:{
        height:64,
    },
    swp:{
        height:64,
        color:'#0f0',
        fontSize:22,
        // background:'orange',
        width:'100%',
        display:'flex',
        justifyContent:'center'
    }

}
const  MyHead:FC<any> =  ({
    uinfo,
    data
}) =>{
    const {userInfo,changeInfo} = uinfo 
    const {collapsed,changecollapsed}=data
    const navigate = useNavigate()
    const [show,setShow] = useState<boolean>(false)
    const [form] = Form.useForm()
    const handleOk = ()=>{
        form.validateFields()
        .then(async value=>{
            if(value.newpass==value.oldpass){
                message.error("新旧密码不能相同")
            }else{
                // ajax 
                let {code,result} = await ajax.changepass(value)
                if(code==200){
                    sessionStorage.removeItem('token')
                    changeInfo(null)
                    navigate("/login")
                }
            }
            
        })
        .catch(err=>{
            message.error("请输入有效的密码")
        })
    }
    const handleCancel = ()=>{
        setShow(false)
    }

    const changePass = ()=>{
        setShow(true)
    }
    const todoLogout = ()=>{
        confirm({
            title: '警告提示',
            icon: <ExclamationCircleOutlined />,
            content: '你真的确定退出登录吗?',
            cancelText:"暂不退出",
            okText: '确定',
            onOk() {
                console.log('OK');
                sessionStorage.removeItem('token')
                changeInfo(null)
                navigate("/login")
            },
            onCancel() {
              console.log('Cancel');
            },
        });
    }
  return (
    <Header
        style={{
            background:"#b5b5b5",
            padding:'0 30px'
        }}
    >
        <Row style={{height:'100%'}}>
            <Col span={8} style={style.cm}>
                <span style={{fontSize:20,color:"#f50",cursor:'pointer'}} onClick={()=>changecollapsed(!collapsed)}>
                    {React.createElement(collapsed  ? MenuUnfoldOutlined : MenuFoldOutlined)}
                </span>
                <Title level={3} style={{margin:"0 0 0 10px",color:"#f50"}}> 校园SaaS管理系统 </Title>
            </Col>
            <Col span={8}>
                <Myswipe id="obox" style={{height:64,overflow:'hidden',zIndex:100}} options={{
                     direction: 'vertical',
                     speed:500,
                     loop:true,
                     autoplay:{
                         delay:2000
                     }
                }}>
                    <MyswipeItem >
                        <div style={style.swp}>坚持到无能为力</div>
                    </MyswipeItem>
                    <MyswipeItem >
                        <div style={style.swp}>拼搏到感动自己</div>
                    </MyswipeItem >
                    <MyswipeItem >
                        <div style={style.swp} >校园SaaS管理系统</div>
                    </MyswipeItem>
                </Myswipe>
            </Col>
            <Col span={8}>
                {
                    userInfo && <div style={{height:64,overflow:'hidden',display:'flex',alignItems:'center',justifyContent:'flex-end',padding:'0 25px'}}>
                        <Dropdown overlay={
                            (
                                <Menu >
                                    <Menu.Item key="/main/home"  icon={<MenuFoldOutlined />}>
                                        <Link to="/main/home">首页</Link>
                                    </Menu.Item>
                                    <Menu.Item key="/main/mine" icon={<UserOutlined />}>
                                        <Link to="/main/mine">个人中心</Link>
                                    </Menu.Item>
                                    <Menu.Item key="/changepwd" onClick={changePass} icon={<LockOutlined />}>
                                        修改密码
                                    </Menu.Item>
                                    <Menu.Item key="/main/anno" icon={<DesktopOutlined />}>
                                        <Link to="/main/anno">公告</Link>
                                    </Menu.Item>
                                </Menu>
                            )
                        }>
                          <span style={{cursor:'pointer',color:"#fff",fontSize:24}}>{userInfo.username} <DownOutlined style={{marginTop:8,color:"#fff",fontSize:18}} />  </span>
                        </Dropdown>
                        
                        <Tag  style={{marginLeft:15}}color={roleList.find((item:any)=>item.value==userInfo.role)?.color }>
                            {roleList.find((item:any)=>item.value==userInfo.role)?.label }
                        </Tag>
                        <MyAvatar/>
                        <Button onClick={todoLogout} style={{marginLeft:15}} shape="circle" danger icon={<LogoutOutlined />} size="large" />
                    </div>
                }
            </Col>
        </Row>

        <Modal  
            title="修改密码" 
            visible={show} 
            onOk={handleOk} 
            onCancel={handleCancel}
            okText="确定修改"
            cancelText="取消"
            okType="danger"
        >
             <Form
                name="normal_login"
                className="myform"
                initialValues={{ 
                  role:1   
                }}
                form={form}
                
            >
                <Form.Item
                  name="oldpass"
                  label="旧密码"
                  rules={[ 
                    { required: true, message: '请输入密码' },
                    { pattern:reg.pwd,message:'请输入6-16的数字+字母组合的密码'}
                  ]}
              >
                  <Input prefix={<LockOutlined className="form-icon"  style={{color:"#ccc"}} />} placeholder="旧密码" />
              </Form.Item>
              <Form.Item
                  name="newpass"
                  label="新密码"
                  rules={[
                    { required: true, message: '请输入密码' },
                    { pattern:reg.pwd,message:'请输入6-16的数字+字母组合的密码'}
                  ]}
              >
                  <Input prefix={<LockOutlined className="form-icon"  style={{color:"#ccc"}} />} placeholder="新密码" />
              </Form.Item>
            </Form>   
        </Modal>
    </Header>
  )
}

export default  inject('uinfo','data')(observer(MyHead)) 